<template>
  <el-form label-position="right" label-width="100px" ref="form" :rules="rules" :model="form">
    <el-form-item label="设备名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
    </el-form-item>
    <el-form-item label="负责站点" prop="team_id">
      <el-select v-model="form.team_id" placeholder="请选择负责站点">
        <el-option
          v-for="item in teamList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="人脸设备号" prop="device_sn">
      <el-input v-model="form.device_sn" placeholder="请输入人脸设备号"></el-input>
    </el-form-item>
    <el-form-item label="设备类型" prop="type" style="display: none;">
      <el-select v-model="form.type" placeholder="请选择设备类型">
        <el-option label="活动设备" value="1"></el-option>
        <el-option label="食堂设备" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import * as APISystem from '@/api/system'
import * as APISolder from '@/api/solder'
import { mapState } from 'vuex'
export default {
  name: 'manager-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      form: {},
      // 站点列表
      teamList: [],
      dialogVisible: false,
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择设备类型',
            trigger: 'blur'
          }
        ],
        device_sn: [
          {
            required: true,
            message: '请输入人脸设备号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    this.teamIndex()
  },
  methods: {
    // 站点列表
    teamIndex () {
      APISolder.teamIndex({ page_size: 1000 }).then(res => {
        if (res.code == 200) {
          this.teamList = res.data.list
        }
      })
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            APISystem.facedevEdit(this.form).then(res => {
              this.$message({ type: "success", message: "编辑成功!"});
              this.cancle()
              this.load()
            })
          } else {
            APISystem.facedevAdd(this.form).then(res => {
              this.$message({ type: "success", message: "新增成功!"});
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.form = { ...newval }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
</style>
